import React from 'react'

const FONT_FAMILIES = [
  'Arial',
  '宋体',
  '黑体',
  'Times New Roman',
  'Courier New',
  'Verdana',
  'Georgia',
  'Palatino',
  'Garamond',
  'Comic Sans MS'
]

const ControlPanel = ({ settings, onChange, onBackgroundImageChange }) => {
  const handleTextChange = (e) => {
    onChange({ text: e.target.value })
  }

  const handleColorChange = (field, e) => {
    onChange({ [field]: e.target.value })
  }

  const handleAlignChange = (align) => {
    onChange({ textAlign: align })
  }

  const handleFontFamilyChange = (e) => {
    onChange({ fontFamily: e.target.value })
  }

  const handleRangeChange = (field, e) => {
    onChange({ [field]: parseInt(e.target.value, 10) })
  }

  return (
    <div className="space-y-6">
      <div>
        <label htmlFor="signature-text" className="label">
          签名文字
        </label>
        <textarea
          id="signature-text"
          className="input h-32"
          value={settings.text}
          onChange={handleTextChange}
          placeholder="输入您的签名文字"
        />
      </div>

      <div>
        <label className="label">文字对齐</label>
        <div className="flex space-x-2">
          <button
            type="button"
            className={`flex-1 py-2 border ${
              settings.textAlign === 'left'
                ? 'bg-blue-500 text-white'
                : 'bg-white text-gray-700'
            } rounded`}
            onClick={() => handleAlignChange('left')}
          >
            左对齐
          </button>
          <button
            type="button"
            className={`flex-1 py-2 border ${
              settings.textAlign === 'center'
                ? 'bg-blue-500 text-white'
                : 'bg-white text-gray-700'
            } rounded`}
            onClick={() => handleAlignChange('center')}
          >
            居中
          </button>
          <button
            type="button"
            className={`flex-1 py-2 border ${
              settings.textAlign === 'right'
                ? 'bg-blue-500 text-white'
                : 'bg-white text-gray-700'
            } rounded`}
            onClick={() => handleAlignChange('right')}
          >
            右对齐
          </button>
        </div>
      </div>

      <div>
        <label htmlFor="font-family" className="label">
          字体
        </label>
        <select
          id="font-family"
          className="input"
          value={settings.fontFamily}
          onChange={handleFontFamilyChange}
        >
          {FONT_FAMILIES.map((font) => (
            <option key={font} value={font} style={{ fontFamily: font }}>
              {font}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label htmlFor="font-size" className="label">
          字体大小: {settings.fontSize}px
        </label>
        <input
          id="font-size"
          type="range"
          min="10"
          max="72"
          value={settings.fontSize}
          onChange={(e) => handleRangeChange('fontSize', e)}
          className="w-full"
        />
      </div>

      <div>
        <label htmlFor="padding" className="label">
          内边距: {settings.padding}px
        </label>
        <input
          id="padding"
          type="range"
          min="0"
          max="100"
          value={settings.padding}
          onChange={(e) => handleRangeChange('padding', e)}
          className="w-full"
        />
      </div>

      <div>
        <label htmlFor="text-color" className="label">
          文字颜色
        </label>
        <div className="flex">
          <input
            id="text-color"
            type="color"
            value={settings.textColor}
            onChange={(e) => handleColorChange('textColor', e)}
            className="h-10 w-10 border border-gray-300 rounded"
          />
          <input 
            type="text" 
            value={settings.textColor} 
            onChange={(e) => handleColorChange('textColor', e)} 
            className="input ml-2" 
          />
        </div>
      </div>

      <div>
        <label htmlFor="background-color" className="label">
          背景颜色
        </label>
        <div className="flex">
          <input
            id="background-color"
            type="color"
            value={settings.backgroundColor}
            onChange={(e) => handleColorChange('backgroundColor', e)}
            className="h-10 w-10 border border-gray-300 rounded"
          />
          <input 
            type="text" 
            value={settings.backgroundColor} 
            onChange={(e) => handleColorChange('backgroundColor', e)} 
            className="input ml-2" 
          />
        </div>
      </div>

      <div>
        <label htmlFor="background-image" className="label">
          背景图片
        </label>
        <input
          id="background-image"
          type="file"
          accept="image/*"
          onChange={onBackgroundImageChange}
          className="w-full text-sm text-gray-500
            file:mr-4 file:py-2 file:px-4
            file:rounded file:border-0
            file:text-sm file:font-semibold
            file:bg-blue-50 file:text-blue-700
            hover:file:bg-blue-100"
        />
        {settings.backgroundImage && (
          <button
            type="button"
            className="mt-2 text-sm text-red-600 hover:text-red-800"
            onClick={() => onChange({ backgroundImage: null })}
          >
            移除背景图片
          </button>
        )}
      </div>
    </div>
  )
}

export default ControlPanel 